<route lang="json5" type="page">
{
  type: 'page',
  needLogin: true,
  style: {
    navigationBarTitleText: '巡查管理',
    navigationBarBackgroundColor: '#FFFFFF',
  },
}
</route>
<template>
  <view class="pa-2">
    <wd-form custom-class="custom-form" ref="form" :model="model">
      <wd-cell-group>
        <view class="pa-4">
          <view class="flex items-center">
            <view class="text-sm flex-1">河面保洁巡查</view>
            <wd-radio-group v-model="model.radio1" inline>
              <wd-radio :value="true" shape="dot">是</wd-radio>
              <wd-radio :value="false" shape="dot">否</wd-radio>
            </wd-radio-group>
          </view>
          <view class="tips text-xs pa-2 mt-3">
            是否存在生活/工业危废垃圾，动植物体漂浮，影响河道风貌整洁，是否存在明显发黄发黑发臭等现象。
          </view>
        </view>
        <view class="custom-drivider"></view>
        <view class="pa-4">
          <view class="flex items-center">
            <view class="text-sm flex-1">沿河排口巡查</view>
            <wd-radio-group v-model="model.radio2" inline>
              <wd-radio :value="true" shape="dot">是</wd-radio>
              <wd-radio :value="false" shape="dot">否</wd-radio>
            </wd-radio-group>
          </view>
          <view class="tips text-xs pa-2 mt-3">
            是否存在晴天排口违规排放，未经批准私自改建扩建排口行为，排口损坏破坏阻碍系统排水现象。
          </view>
        </view>
        <view class="custom-drivider"></view>
        <view class="pa-4">
          <view class="flex items-center">
            <view class="text-sm flex-1">岸线管护巡查</view>
            <wd-radio-group v-model="model.radio3" inline>
              <wd-radio :value="true" shape="dot">是</wd-radio>
              <wd-radio :value="false" shape="dot">否</wd-radio>
            </wd-radio-group>
          </view>
          <view class="tips text-xs pa-2 mt-3">
            是否存在岸线生活工业垃圾违规堆放，对河道产生一定影响，是否存在栏杆破损，驳岸临倾现象，是否
          </view>
        </view>
      </wd-cell-group>
      <wd-cell-group custom-class="mt-2">
        <wd-picker
          prop="river"
          v-model="model.river"
          align-right
          :columns="riverOptions"
          label="巡查河道"
          value-key="id"
          label-key="title"
          @confirm="handleConfirm($event, 'river')"
          :rules="[{ required: true, message: '请选择巡查河道' }]"
        />
        <view class="custom-drivider"></view>
        <wd-picker
          prop="men"
          v-model="model.men"
          align-right
          :columns="menOptions"
          label="巡查人员"
          value-key="id"
          label-key="title"
          @confirm="handleConfirm($event, 'men')"
          :rules="[{ required: true, message: '请选择巡查人员' }]"
        />
      </wd-cell-group>
      <wd-cell-group custom-class="mt-2">
        <wd-textarea
          prop="question"
          v-model="model.question"
          label="巡查问题"
          placeholder="请输入位置描述"
          auto-height
          :rules="[{ required: true, message: '请输入巡查问题' }]"
        />
      </wd-cell-group>
      <wd-cell-group custom-class="mt-2">
        <wd-textarea
          prop="content"
          v-model="model.content"
          label="处理措施"
          placeholder="请添加事件描述"
          auto-height
          :rules="[{ required: true, message: '请输入处理措施' }]"
        />
      </wd-cell-group>
      <wd-cell-group custom-class="mt-2">
        <view class="pa-4">
          <view class="text-sm mb-3">图片上传</view>
          <wd-upload
            prop="fileList"
            :file-list="model.fileList"
            image-mode="aspectFill"
            label="照片上传"
            :action="action"
            @change="handleChange"
          ></wd-upload>
        </view>
      </wd-cell-group>

      <view class="fixed-bottom-btn">
        <wd-button type="primary" :round="false" size="large" @click="handleSubmit" block>
          保存
        </wd-button>
      </view>
    </wd-form>
  </view>
</template>

<script lang="ts" setup>
const action: string =
  'https://mockapi.eolink.com/zhTuw2P8c29bc981a741931bdd86eb04dc1e8fd64865cb5/upload'
const form = ref()
const model = reactive<{
  radio1: boolean
  radio2: boolean
  radio3: boolean
  river: number
  men: number
  question: string
  content: string
  fileList: any[]
}>({
  radio1: true,
  radio2: false,
  radio3: false,
  river: null,
  men: null,
  question: '',
  content: '',
  fileList: [],
})
const riverOptions = ref([
  { id: 1, title: '选项1' },
  { id: 2, title: '选项2' },
])
const menOptions = ref([
  { id: 1, title: '选项1' },
  { id: 2, title: '选项2' },
])
function handleConfirm({ value }, type: string) {
  console.log('值---', value)
  console.log('字段名---', type)
}
function handleSubmit() {
  form.value
    .validate()
    .then(({ valid, errors }) => {
      if (valid) {
        // '校验通过'
        console.log('model---', model)
      }
    })
    .catch((error) => {
      console.log(error, 'error')
    })
}
</script>

<style lang="scss">
page {
  background: #f4f8fb;
  padding-bottom: 180rpx;
  /* #ifdef H5 */
  min-height: 100%;
  /* #endif */
}
.custom-form {
  .wd-cell-group {
    border-radius: 24rpx;
    overflow: hidden;
  }
  :deep(.wd-textarea) {
    flex-direction: column !important;
    textarea {
      min-height: 100rpx;
      margin-top: 16rpx;
    }
  }
  :deep(.wd-cell__right) {
    .wd-cell__error-message {
      text-align: right;
    }
  }
  .fixed-bottom-btn {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 16px;
    background: #fff;
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
    z-index: 100;
  }
  .tips {
    background: #f7f8fa;
    border-radius: 18rpx;
    color: #72737e;
    line-height: 38rpx;
  }
}
.custom-drivider {
  height: 1rpx;
  margin: 0 16rpx;
  background: #E5E5E5;
}
</style>
